<script setup lang="ts">

import {Back, Document, EditPen, List} from "@element-plus/icons-vue";
import router from "@/router";
import {useProblemStore} from "@/stores/problem.ts";

const problemStore = useProblemStore();

function back() {
  problemStore.resetProblem()
  router.push("/server/home");
}

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-button :icon="Back" @click="back">返回</el-button>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
              default-active="/server/problem-edit/content"
              router
              class="el-menu-vertical-demo"
          >
            <el-menu-item index="/server/problem-edit/content">
              <el-icon>
                <Document/>
              </el-icon>
              <span>题目描述</span>
            </el-menu-item>

            <el-tooltip v-if="problemStore.problemId === ''" effect="dark" content="请先完成题目描述" placement="right">
              <div>
                <el-menu-item index="/server/problem-edit/case" :disabled="problemStore.problemId === ''">
                  <el-icon>
                    <List/>
                  </el-icon>
                  <span>测试用例</span>
                </el-menu-item>
              </div>
            </el-tooltip>
            <el-menu-item v-else index="/server/problem-edit/case">
              <el-icon>
                <List/>
              </el-icon>
              <span>测试用例</span>
            </el-menu-item>

            <el-tooltip v-if="problemStore.problemId === ''" effect="dark" content="请先完成题目描述" placement="right">
              <div>
                <el-menu-item index="/server/problem-edit/code" :disabled="problemStore.problemId === ''">
                  <el-icon>
                    <EditPen/>
                  </el-icon>
                  <span>题目代码</span>
                </el-menu-item>
              </div>
            </el-tooltip>

            <el-menu-item v-else index="/server/problem-edit/code">
              <el-icon>
                <EditPen/>
              </el-icon>
              <span>题目代码</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <el-card>
            <router-view/>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="scss">
.common-layout {
  :deep(.el-container) {
    height: 100vh;

    .el-header {
      background-color: #F8F9FA;
      display: flex;
      align-items: center;
    }

    .el-container {
      .el-aside {
        .el-menu {
          border: 0;

          .is-active {
            background-color: azure;
          }
        }

        border-right: 1px solid #dcdfe6;
      }

      .el-main {
        padding: 0;
        min-width: 900px;
        min-height: 800px;
        height: 100%;

        .el-card {
          max-width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>